<template>
  <!-- 角色设定 -->
  <div class="app-container Rolessettting">
    <div class="btn-box">
      <el-button type="primary" size="mini" @click="showDialog_Add"
        >新增</el-button
      >
    </div>
    <!-- 表格 -->
    <comTable
      :list="comTableList"
      :modes="comTableMode"
      :pagination="comTablePagination"
      :config="comTableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <el-table-column
        :width="'318px'"
        class="operate"
        align="left"
        label="操作"
      >
        <template #default="{ row }">
          <comMb8Button
            :config="comMb8ButtonConfig_Table"
            @handle="clickBtnGroup_Table(arguments, row)"
          ></comMb8Button>
        </template>
      </el-table-column>
    </comTable>

    <!-- 对话框 -->
    <comDialog
      :title="comDialogConfig_Add.title"
      :dialogVisible="comDialogConfig_Add.dialogVisible"
      :width="comDialogConfig_Add.width"
      @EventClose="comDialogConfig_Add.dialogVisible = false"
    >
      <el-form
        :model="comDialogForm"
        label-width="100px"
        label-position="left"
        :rules="comDialogRules"
        ref="comDialog_Add"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input
            v-model="comDialogForm.name"
            placeholder="请输入角色"
            autosize
          ></el-input>

          <!-- <el-select v-model="comDialogForm.name"
                     placeholder="请选择角色"
                     style="width: 100%">
            <el-option v-for="(item, index) in comDialogFormSelectOption_Add"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="角色定义" prop="orientation">
          <el-input
            v-model="comDialogForm.orientation"
            placeholder="请输入角色定义"
            type="textarea"
            autosize
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="comDialogForm.status" label="0">正常</el-radio>
          <el-radio v-model="comDialogForm.status" label="1">停用</el-radio>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="comDialogConfig_Add.dialogVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="onSubmitDialog">保存</el-button>
      </template>
    </comDialog>
  </div>
</template>

<script>
import comTable from "@/wss/components/comTable.vue";
import comMb8Button from "@/wss/components/comMb8Button.vue";
import comDialog from "@/wss/components/comDialog.vue";
import {
  getPositionList,
  addPosition,
  editPosition,
} from "@/wss/api/base/position";

// 若依接口--角色
import { addRole, updateRole } from "@/api/system/role";

export default {
  name: "Rolessettting",
  components: {
    comTable,
    comMb8Button,
    comDialog,
  },
  data() {
    return {
      addORedit: "add",
      //------Table--------//
      comTableMode: [
        {
          type: "selection", //多选列
          width: "50%",
          align: "center",
        },
        {
          label: "角色",
          mode: "name",
          align: "center",
          width: "100%",
        },
        {
          label: "角色定义",
          mode: "orientation",
        },
        {
          label: "状态",
          mode: "status",
          align: "center",
          width: "50%",
          //开关组件默认显示
        },
        {
          label: "创建时间",
          mode: "createTime",
          align: "center",
          width: "260px",
        },
      ],
      comTableList: [],
      comTablePagination: {
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      },
      comTableConfig: {
        loading: false,
      },

      //------- Button -------//
      comMb8ButtonConfig_Table: [
        {
          label: "修改",
          type: "primary",
          icon: "",
          vHasPermi: "",
          btnId: "update",
        },
        {
          label: "删除",
          type: "danger",
          icon: "",
          vHasPermi: "",
          btnId: "delete",
        },
        {
          label: "职等设定",
          type: "",
          icon: "",
          vHasPermi: "",
          btnId: "gradeSetting",
        },
        {
          label: "KPI设定",
          type: "",
          icon: "",
          vHasPermi: "",
          btnId: "kpiSetting",
        },
      ],

      //------- Dialog 新增窗口 -------//
      comDialogConfig_Add: {
        title: "新增角色",
        dialogVisible: false,
        width: "50%",
      },
      comDialogForm: {
        name: "",
        orientation: "",
        status: "0",
      },

      //  	{
      //       roleId: undefined,
      //       roleName: undefined,
      //       roleKey: undefined,
      //       roleSort: 0,
      //       status: "0",
      //       menuIds: [],
      //       deptIds: [],
      //       menuCheckStrictly: true,
      //       deptCheckStrictly: true,
      //       remark: undefined,
      //     },

      comDialogRules: {
        name: [{ required: true, message: "请选择角色", trigger: "change" }],
        orientation: [
          { required: true, message: "请输入角色定义", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.getPositionList(this.comTablePagination);
  },

  methods: {
    //------- 分页 -------//
    // pageSize 改变时会触发	每页条数
    handleSizeChange(val) {
      this.comTablePagination.pageSize = val;
      this.getPositionList(this.comTablePagination);
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      this.comTablePagination.pageNum = val;
      this.getPositionList(this.comTablePagination);
    },

    //------- 按钮组 -------//
    //表格操作栏按钮组
    clickBtnGroup_Table(childParams, row) {
      console.log(childParams, row);
      if (childParams[1] == "delete") {
        // 删除操作
        console.log("删除");
        this.deletePosition(row.idStr);
      } else if (childParams[1] == "update") {
        // 修改操作
        this.addORedit = "edit";
        // 显示对话框
        this.comDialogConfig_Add = {
          title: "修改角色",
          dialogVisible: true,
          width: "50%",
        };
        // 内容
        this.comDialogForm = {
          id: row.idStr,
          name: row.name,
          orientation: row.orientation,
          status: row.status,
        };
      } else if (childParams[1] == "kpiSetting") {
        // kip 设定
        console.log("职等设定");
        let data = {
          postionId: row.idStr,
          name: row.name,
        };
        this.$router.push({
          path: "/humanResourcesPlatform/performanceRules/KPISetting",
          query: { data: JSON.stringify(data) },
        });
      }
    },

    //------- 对话框 -------//
    //重置有表单验证的表单项
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    //展示对话框
    showDialog_Add() {
      this.addORedit = "add";
      this.resetForm("comDialog_Add");
      this.comDialogConfig_Add.dialogVisible = true;
    },
    //提交对话框 角色表单
    onSubmitDialog() {
      this.$refs["comDialog_Add"].validate((valid) => {
        if (valid) {
          if (this.addORedit == "add") {
            this.addPosition(this.comDialogForm);
            this.comDialogConfig_Add.dialogVisible = false;

            //   addRole(this.form).then((response) => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          } else if (this.addORedit == "edit") {
            console.log("修改了");
            this.editPosition(this.comDialogForm);
            this.comDialogConfig_Add.dialogVisible = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    /* 获取数据 */
    //------- 获取 角色设定 列表 -------//
    async getPositionList(data) {
      this.comTableConfig.loading = true;
      let result = await getPositionList(data).then((res) => res);
      if (result.code == "200") {
        this.comTableList = result.rows;
        console.log("获取角色列表：", this.comTableList);
        this.comTablePagination.total = result.total;
      }
      this.comTableConfig.loading = false;
    },
    //------- 添加 角色设定 -------//
    async addPosition(data) {
      let result = await addPosition(data).then((res) => res);
      if (result.code == "200") {
        this.$modal.msgSuccess("添加成功");
        this.getPositionList(this.comTablePagination);
      } else {
        this.$modal.msgWarning("添加失败：", result);
      }
    },
    // 修改 角色设定
    async editPosition(data) {
      let result = await editPosition(data).then((res) => res);
      if (result.code == "200") {
        this.$modal.msgSuccess("修改成功");
        this.getPositionList(this.comTablePagination);
      } else {
        this.$modal.msgWarning("修改失败：", result);
      }
    },
    //------- 删除 角色设定（接口涉及太多表，等待后端解决） -------//
    async deletePosition(data) {
      console.log("deleteId:", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.Rolessettting {
  .btn-box {
    margin-bottom: 8px;
  }
  ::v-deep .mb8 {
    //样式穿透
    margin-bottom: 0px;
  }
}
</style>